<template>
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
  <div class="site-sidebar__inner">
    <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu" unique-opened>
      <el-menu-item index="home" @click="$router.push({ name: 'home' })" :id="getBgcolor(sidebarLayoutSkin)" class="shouye">
        <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- <el-submenu index="demo">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>demo</span>
          </template>
          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu>-->
      <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes"></sub-menu>
    </el-menu>
  </div>
</aside>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
import {
  isURL
} from "@/utils/validate";
export default {
  data() {
    return {
    };
  },
  filters: {},
  components: {
    SubMenu,
  },
  computed: {
    // 背景颜色
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin;
      },
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
    },
    menuList: {
      get() {
        // 对侧边路由，权限管理
        let menuListArr = JSON.parse(
          JSON.stringify(this.$store.state.common.menuList)
        );
        return menuListArr;
      },
      set(val) {
        this.$store.commit("common/updateMenuList", val);
      },
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      },
    },
    dynamicMenuRoutes: {
      get() {
        return this.$store.state.common.dynamicRoutes;
      },
      set(val) {
        this.$store.commit("common/updateDynamicMenuRoutes", val);
      },
    },
  },
  watch: {
    $route: "routeHandle",
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
    this.routeHandle(this.$route);
  },
  methods: {
    // 判断是用的什么主题,添加完主题后记得到style里面写上主题颜色
    getBgcolor(val) {
      return 'bg-' + val;
    },
    // 路由操作
    routeHandle(route) {
      // 如果是跳转到首页，把选中的调为空
      if (route.name == 'home') {
        this.menuActiveName = "";
        return;
      }
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query,
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../assets/scss/_variables';
/deep/.site-sidebar__menu.el-menu .el-menu-item.shouye {
    padding:0 5px !important;
  }

#bg-dark {
  background-color: mix(#000, $sidebar--background-color-dark, 20%);
}

#bg-dark.el-menu-item.is-active {
  color: mix(#fff, $sidebar--color-text-dark, 80%);
  background-color: mix(#000, $sidebar--background-color-dark, 50%);
}

#bg-dark-one {
  color: mix(#000, $sidebar--color-text-dark-font, 30%);
  background: mix(#000, $sidebar--background-color-dark-hover, 45%);
}

#bg-dark-one.el-menu-item.is-active {
  color: mix(#000, $sidebar--color-text-dark-font, 60%);
  background-color: mix(#17B3A3, $sidebar--background-color-dark-hover, 50%);

}

</style>
